<template>
    <div class="screen screen4">
        <module class="callsource" title="来电渠道分布图" icon="icon-ditu">
            <channeldist :tabledata="channeldistData"></channeldist>
        </module>
        <span style="width: 18px"></span>
        <div class="rmodule">
            <module title="来电渠道排名" icon="icon-12paiming">
                <datatable
                    keyname="来电渠道"
                    valname="接入量"
                    :tabledata="rankingData"
                ></datatable>
            </module>
            <span style="height: 14px"></span>
            <module title="渠道接通率" icon="icon-bingtu">
                <datatable
                        keyname="来电渠道"
                        valname="接通率"
                        :tabledata="callrateData"
                ></datatable>
            </module>
        </div>
    </div>
</template>

<script>
    import module from './baseComponents/module'
    import channeldist from './screen4parts/channeldist'
    import datatable from './baseComponents/datatable'
    import api from '../api'
    export default {
        name: "screen4",
        components:{
            module,channeldist,datatable
        },
        data(){
          return {
              showNum:4,    //显示前4名
              rankingData:[
                  /*{key:'渠道一',val:78},
                  {key:'渠道一',val:888},
                  {key:'渠道一',val:75},
                  {key:'渠道一',val:78},
                  {key:'其它',val:56}*/
              ],
              callrateData:[
                  /*{key:'渠道一',val:'89%'},
                  {key:'渠道一',val:'89%'},
                  {key:'渠道一',val:'89%'},
                  {key:'渠道一',val:'89%'},
                  {key:'其它',val:'89%'}*/
              ],
              channeldistData:{
                  columns: ['CHNL_BIZ_NAME', 'ACCS_CNT'],
                  rows: [
                      /*{ 'CHNL_BIZ_NAME': '普通客户', 'ACCS_CNT': 1393 },
                      { 'CHNL_BIZ_NAME': '大客户', 'ACCS_CNT': 3530 },
                      { 'CHNL_BIZ_NAME': '实施', 'ACCS_CNT': 2923 },
                      { 'CHNL_BIZ_NAME': 'VIP客户', 'ACCS_CNT': 1723 },
                      { 'CHNL_BIZ_NAME': '服务', 'ACCS_CNT': 3792 },
                      { 'CHNL_BIZ_NAME': '代理', 'ACCS_CNT': 4593 }*/
                  ]
              }
          }
        },
        methods:{
            async refreshThisSc(){
               this.channeldistData.rows = await api.getChannelAccCnt()
                let rankingData = [];
                let other = {key:'其它',val:0};
                this.channeldistData.rows.forEach((item,index)=>{
                    if(index<this.showNum){
                        let it = {};
                        it['key'] = item['CHNL_BIZ_NAME']
                        it['val'] = item['ACCS_CNT']
                        rankingData.push(it)
                    }else {
                        other.val += parseInt(item['ACCS_CNT'])
                    }
                })
                if(this.channeldistData.rows==this.showNum){
                    let it = {};
                    it['key'] = this.channeldistData.rows[this.showNum]['CHNL_BIZ_NAME']
                    it['val'] = this.channeldistData.rows[this.showNum]['ACCS_CNT']
                    rankingData.push(it)
                }else if(this.channeldistData.rows>this.showNum){
                    rankingData.push(other)
                }
                this.rankingData = rankingData
               this.callrateData = await api.getChannelAccRat()

            }
        },
        created(){
            this.refreshThisSc()
        }
    }
</script>

<style lang="less" scoped>
    .screen4{
        &>div{
            width: 0;
        }
        &>.callsource{
            flex: 3 1 auto;
        }
        &>.rmodule{
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            &>div{
                height: 0;
                flex: 1 1 auto;
            }
        }
    }
</style>
